<template>
	<view class="login">
		<uni-status-bar></uni-status-bar>
		<view class="flex align-center">
			<view class="iconfont icon-guanbi flex align-center justify-center font-lg"
			style="width: 100upx;height: 100upx;" hover-class="bg-light" 
			@click="back"></view>
			<view class="flex align-end justify-end m-4 flex-1">
				<view class="font" @click="changeStatus">
					{{status?'密码登录':'验证码登陆'}}
				</view>
			</view>
		</view>
		<view class="text-left m-2 px-5 font-lg">{{status ? '手机号登录':'密码登录'}}</view>
		<view class="text-left mx-7 text-gray-light font-sm">未注册手机号将自动创建账号</view>
		<view class="mx-5 mt-4">
			<template v-if="status">
				<view class="mb-2 flex align-stretch border-bottom pb-2">
					<view class="flex align-center justify-center font-md ml-2 mr-1">+86</view>
					<uni-icons size="8" class="iconfont iconguojiaquhaoxialaanniu mt-2 mr-2"/>
					<input type="number" v-model="username" placeholder="请输入手机号码" 
					class="px-2 flex-1 text-left" style="min-height: 84upx;"/>
				</view>
				<view class="mb-2 flex align-stretch border-bottom pb-2">
					<input type="number" v-model="password" placeholder="请输入验证码" class="p-2 flex-1 text-left" style="min-height: 84upx;"/>
					<view class="flex align-center justify-center font-sm text-white rounded36 " :class="codeTime > 0 ? 'bg-main-disabled' : 'bg-main'" 
					style="width: 180upx;" @click="getCode">{{codeTime > 0 ? codeTime + ' s' : '获取验证码'}}</view>
				</view>
			</template>
			
			<template v-else>
				<view class="mb-4 flex align-stretch border-bottom">
					<view class="flex align-center justify-center font-md px-2">+86</view>
					<input type="number" v-model="username" placeholder="请输入手机号码" class="p-2 flex-1 text-left" style="min-height: 84upx;"/>
				</view>
				<view class="mb-4 flex align-stretch border-bottom">
					<input type="text" v-model="password" placeholder="请输入密码" class="p-2 flex-1 text-left" style="min-height: 84upx;"/>
				</view>
			</template>
		</view>
		
		<view class="flex align-start justify-start text-muted mx-6">
			登录即同意<text class="text-main">《用户协议》</text>和<text class="text-main">《隐私政策》</text>
		</view>
		
		<view class="m-6">
			<button class="submitBtn font-md py-1 mt-2" style="width: 100%;letter-spacing:32rpx" type="primary" 
			:disabled="disabled" :class="disabled ? 'bg-main-disabled':'bg-main'" @click="submit">登录</button>
		</view>
		
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
	export default {
		components: {
			uniStatusBar
		},
		data() {
			return {
				status:true,
				username:"",
				password:"",
				registrationid:"",
				codeTime:0,
				apiCode:100,
				UserInfo:{}
			}
		},
		onLoad() {
			uni.getStorage({
				key:"registrationID",
				success:(res)=>{
					if (res.data) {
						console.log(res.data);
						this.registrationid = res.data;
					}
				}
			})
		},
		computed: {
			disabled() {
				if (this.username === '' || this.password === '') {
					return true
				}
				return false
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 初始化表单
			initForm(){
				this.username = ''
				this.password = ''
			},
			// 切换登录方式
			changeStatus(){
				// 初始化表单
				this.initForm()
				this.status = !this.status
			},
			// 获取验证码
			getCode(){
				// 防止重复获取
				if (this.codeTime > 0) {
					return;
				}
				// 验证手机号
				if (!this.validate()) return;
				let data={
					mobile:this.username
				};
				this.$H.post('/user/register/doregisterPhoneSendCode',data).then(res=>{
					console.log(res);
					this.apiCode = res.code
					if(this.apiCode==101){
						// 倒计时
						this.codeTime = 60
						let timer = setInterval(()=>{
							if (this.codeTime >= 1) {
								this.codeTime--
							} else {
								this.codeTime = 0
								clearInterval(timer)
							}
						},1000)
					}else{
						uni.showModal({
							title: '温馨提示',
							content:res.info,
							showCancel:false
						})
					}
				});
			},
			// 表单验证
			validate(){
				//手机号正则
				var mPattern = /^1[3456789]\d{9}$/; 
				if (!mPattern.test(this.username)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false
				}
				// ...更多验证
				return true
			},
			// 提交
			submit(){
				let data={
					username:this.username,
					password:this.password,
					registrationid:this.registrationid
				};
				console.log(data);
				// 表单验证
				if (!this.validate()) return;
				// 提交后端
				// 登录成功处理
				// 获取分类
				this.$H.post('/user/login/dologinjson',data).then(res=>{
					console.log(res);
					this.apiCode = res.code
					if(this.apiCode==101){
						this.UserInfo=res.referer;
						console.log(this.UserInfo);
						uni.setStorage({
							key:'user-info',
							data:JSON.stringify(this.UserInfo)
						});
						console.log('user_login',this.UserInfo.user_login);
						store.commit('login',this.UserInfo.user_login)
						console.log('hasLogin',store.state.hasLogin);
						this.back();
					}else{
						console.log(res.info);
						uni.showModal({
							title: '温馨提示',
							content:res.info,
							showCancel:false
						})
					}
				});
			},
			
		}
	}
</script>

<style>
.login {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #ffffff;
}
</style>
